<EditorNav bind:active="step" bind:maxStep bind:steps bind:chart="$chart" />

<div>
    {#if step=='upload'} UPLOAD
    <!-- <UploadStep
        bind:readonly="$dataReadonly"
        bind:datasets
        bind:chart="$chart" /> -->
    {:elseif step=='describe'} DESCRIBE {:elseif step=='visualize'} VISUALIZE {:elseif step=='publish'}
    <PublishSidebar />
    {:else} :( {/if}
</div>

<script>
    import { __ } from '../shared/l10n';

    export default {
        components: {
            EditorNav: './EditorNav.html',
            // UploadStep: '../upload/App.html',
            PublishSidebar: '../publish/PublishSidebar.html'
        },
        data() {
            return {
                datasets: [],
                steps: [
                    { id: 'upload', title: __('Upload Data') },
                    { id: 'describe', title: __('Check & Describe') },
                    { id: 'visualize', title: __('Visualize') },
                    { id: 'publish', title: __('Publish & Embed') }
                ]
            };
        },
        helpers: { __ },
        oncreate() {
            // const {step} = this.get();
            // const { chartJSON } = this.store.get();
            // const chart = new Chart(chartJSON);
            // chart.set({ writable: true });
            // this.store.set({ chart });
        }
    };
</script>
